<template>
  <view>
    <view class="m-t-b">
      <u-search @search="onSearch" search-icon="/static/tduck/s.png" shape="square" placeholder="搜索" bg-color="#fff"
        :show-action="false" />
    </view>
    <scroll-view class="scroll-Y" scroll-y="true" @scrolltolower="lower" :scroll-top="scrollTop" @scroll="scroll">
      <view class="list flex flex-wrap">
        <view class="list-item" v-for="(item, index) of list" :key="item.id">
          <view class="list-item-body" @click="handleOpenDir(item)">
            <view class="type-name">
              <view class="form-name u-line-1">{{ removeHtmlTag(item.name) }}</view>
              <view v-if="item.type !== 3">
                <u-tag text="表单" mode="dark" v-if="item.type==1" />
                <u-tag text="流程" mode="dark" type="warning" v-if="item.type==2" />
                <u-tag text="考试" mode="dark" type="success" v-if="item.type==4" />
				<u-tag text="营销" mode="dark" type="success" v-if="item.type==5" />
			  </view>
            </view>
            <view class="body" slot="body" v-if="item.type !== 3">
              <view class="tags">
                <u-badge :is-dot="true" :absolute="false" type="primary" v-if="item.status==1"></u-badge>
                <u-badge :is-dot="true" :absolute="false" type="success" v-if="item.status==2"></u-badge>
                <u-badge :is-dot="true" :absolute="false" type="error" v-if="item.status==4"></u-badge>
				<u-badge :is-dot="true" :absolute="false" type="primary" v-if="item.status==5"></u-badge>
				<text class="tag">{{item.statusDesc}}</text>
              </view>
              <view class="u-m-t-20">
                <text class="time">
                  创建时间：{{ item.createTime }}
                </text>
              </view>
            </view>
            <view class="folder-body u-flex" slot="body" v-else>
              <image class="folder-img" src="../../../static/tduck/form/dir.png" mode=""></image>
            </view>
            <view v-if="item.type === 3" class="file-operations ">
              <view class="flex-1" @click.stop="onRename(item)">
                <u-icon name="edit-pen" size="30" color="#2b85e4" label-size='24' label="重命名">
                </u-icon>
              </view>
              <view class="flex-1" @click.stop="onDelete(item.formKey,index)">
                <u-icon name="trash-fill" size="30" color="#2b85e4" label-size='24' label="删除">
                </u-icon>
              </view>
              <view class="flex-1"></view>
            </view>
            <view v-else class="flex form-btn">
              <u-icon name="eye-fill" size="30" color="#2b85e4" label-size='24' label="查看" class="flex-1 u-row-center"
                @click="$u.route('/pages/form/share?formKey='+item.formKey)">
              </u-icon>
              <u-icon name="order" size="30" color="#2b85e4" label-size='24' label="数据" class="flex-1 u-row-center"
                @click="handleOpenDetail(item,index)">
              </u-icon>
              <u-icon name="more-dot-fill" size="30" label-size='24' color="#2b85e4" label="更多"
                class="flex-1 u-row-center" @click="handleOpenAction(item,index)">
              </u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="m-t">
        <u-empty v-if="!list.length" src="/static/tduck/null.png" text="啊哦~没有数据" mode="list" />
        <view v-if="list.length < total && loadStatus !=='nomore'" class="loadmore" @click="loadMore">
          <u-loadmore :status="loadStatus"></u-loadmore>
        </view>
      </view>
    </scroll-view>
    <u-action-sheet :list="actionList" v-model="show" @click="handleActionClick"></u-action-sheet>
  </view>
</template>

<script>
  import {
    removeHtmlTag
  } from '@/utils/index.js';
  export default {
    props: ['type', 'title'],
    data() {
      return {
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        query: {
          current: 1,
          size: 20,
          folderId: 0,
          name: ''
        },
        loadStatus: 'loadmore',
        list: [],
        total: 0,
        actionList: [{
            text: '发布',
          }, {
            text: '预览'
          }, {
            text: '暂停'
          },
          {
            text: '删除'
          }
        ],
        show: false,
      };
    },
    created() {
      this.loadList()
    },
    methods: {
      removeHtmlTag(str) {
        return removeHtmlTag(str);
      },
      lower(e) {
        this.loadMore();
      },
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop
      },
      loadMore() {
        if (this.list.length >= this.total || this.loadStatus === 'loading') {
          return;
        }
        this.loadStatus = "loading";
        this.query.current = this.query.current + 1;
        this.$nextTick(() => {
          this.loadList();
        })
      },
      loadList() {
        uni.showLoading({
          title: '加载中...'
        })
        const handelThen = (res) => {
          if (!res.records || res.records.length == 0 || this.list.length >= res.total) {
            this.loadStatus = "nomore";
            return;
          }
          this.list = this.list.concat(res.records);
          this.total = res.total;
          this.loadStatus = "loadmore";
          uni.hideLoading();
          uni.stopPullDownRefresh();
        }
        if (this.type === 2) {
          this.$u.api.getFormPage(this.query).then(handelThen);
        } else {
          this.$u.api.getFormCooperationPage(this.query).then(handelThen);
        }
      },
      onSearch(value) {
        this.list = [];
        this.query.current = 0;
        this.query.name = value || '';
        this.loadList();
      },
      onRename(item) {
        const _t = this

        const success = (res) => {
          const {
            confirm,
            content
          } = res;
          if (confirm && content) {
            item.name = content
            _t.$u.api.form.updateForm(item).then(res => {
              _t.$u.toast('修改成功')
            })
          }
        }

        uni.showModal({
          title: '重命名文件夹名称',
          content: '',
          editable: true,
          placeholderText: item.name,
          success
        });
      },
      onDelete(key, index) {
        let that = this
        uni.showModal({
          title: '提示',
          content: '确认删除该文件夹?',
          success: function(res) {
            if (res.confirm) {
              that.$u.api.form.deleteForm({
                'formKey': key
              }).then(res => {
                if (res) {
                  that.$u.toast('刪除成功')
                  that.list.splice(index, 1)
                }
              })
            }
          }
        });
      },
      handleOpenDir(item) {
        if (item.folder) {
          const obj = {
            query: this.query,
            list: this.list,
            scrollTop: this.old.scrollTop,
            total: this.total
          }

          uni.setStorage({
            key: 'formPageData',
            data: JSON.stringify(obj),
            success: function() {}
          });


          this.query.folderId = item.id
          this.onSearch('')
          this.$emit('folder', item.name)
        }
      },
      onBack() {
        const _t = this;
        uni.getStorage({
          key: 'formPageData',
          success: (res) => {
            const {
              query,
              list,
              scrollTop,
              total
            } = JSON.parse(res.data);

            _t.list = list;
            _t.$nextTick(() => {
              _t.total = total;
              query.folderId = 0;
              _t.query = query;
              setTimeout(() => {
                _t.scrollTop = scrollTop;
              }, 300)
            })
          }
        });
        // this.onSearch('');
      },
      handleOpenAction(form, index) {
        this.show = true
        this.formData = form
        this.formData.index = index
      },
      handleOpenDetail(form, index) {
        console.log(form)
        let params = JSON.stringify({
          key: form.formKey,
          title: form.textName,
          token: this.vuex_token
        })
        let url = `${this.$u.api.getWebBaseUrl()}/m/project/form/data`
        uni.navigateTo({
          url: `/pages/common/webview?url=${url}&params=${params}`
        })
      },
      handleActionClick(index) {
        if (index == 0) {
          this.$u.api.form.publishForm(this.formData).then(res => {
            this.$u.toast('发布成功')
            this.list[this.formData.index]['statusDesc'] = '收集中'
            this.list[this.formData.index]['status'] = 2
          })
        } else if (index == 1) {
          let params = JSON.stringify({
            key: this.formData.formKey,
            title: this.formData.textName
          })
          uni.navigateTo({
            url: `/pages/common/webview?url=${this.$u.api.getWebBaseUrl()}/project/form/view&params=${params}`
          })
        } else if (index == 2) {
          this.$u.api.form.stopForm(this.formData).then(res => {
            this.$u.toast('停止发布')
            this.list[this.formData.index]['statusDesc'] = '停止收集'
            this.list[this.formData.index]['status'] = 1
          })
        } else if (index == 3) {
          this.$u.api.form.logicDeleteForm(this.formData).then(res => {
            this.$u.toast('删除成功')
            this.list.splice(this.formData.index, 1)
          })
        }
      },
    }
  };
</script>
<style lang="scss">
  page {
    background-color: $u-bg-color;
  }
</style>
<style lang="scss" scoped>
  page {
    height: 100%;
    background-color: $u-bg-color;
  }

  .scroll-Y {
    height: 72vh;
  }

  .list {
    margin: -12.68rpx;
    font-size: 25.36rpx;

    .list-item {
      width: 100%;
      padding: 12.68rpx;
    }

    .list-item-body {
      background-color: #fff;
      border-radius: 18.12rpx;
      position: relative;
      // padding: 36.23rpx;
      padding-bottom: 0;
    }

    .img {
      display: block;
      height: 117.75rpx;
      margin: 0 auto;
    }

    .type-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15rpx 40rpx;
    }

    .form-name {
      // padding: 15rpx;
      font-size: 28rpx;
      // font-weight: bold;
      color: $u-main-color;
      line-height: 50rpx;
    }

    .body {
      padding: 15rpx 40rpx;
      font-size: 22rpx;
    }

    .tags {
      min-height: 18rpx;
    }

    .time {
      margin-top: 20rpx;
      // font-size: 20rpx;
      color: #999da4;
    }

    .form-btn {
      color: #1BA6FC;
      text-align: center;
      padding: 20rpx;
    }
  }

  .hide-nav {
    height: 0;
    overflow: hidden;
  }

 .tag {
   font-size: 24rpx;
   color: #989898;
   margin-left: 8rpx;
 }

  .file-status {
    display: flex;
    align-items: center;
  }

  .file-operations {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 20rpx;
  }

  .folder-body {
    .time {
      margin-top: 0rpx;
      padding: 0 15rpx 0 15rpx;
    }

    .folder-img {
      width: 80rpx;
      height: 80rpx;
      margin: 0 auto;
      margin-bottom: 16rpx;
    }
  }
</style>
